<template>
   <div class="my-tag" @dblclick="openEdit">
               <input 
                class="input"
                type="text"
                placeholder="输入标签"
                v-if="edit"
                v-focus
                @blur="close"
                v-model="tag"

                @keyup.enter="harry"
              /> 
              <div v-else class="text" >{{value}}</div>
              <!-- 1:用v-if和v-esle控制input和tag的显示和隐藏 -->
            </div>
</template>
<script>
  // 核心需求：
  // 1:双击显示输入框，自动获取焦点
  // 2:失去焦点。隐藏输入框
  // 3：显示时要回显
  // 4：修改标签信息，回车，显示修改后的文本
export default {
  props:['value'],
  data(){
    return{
      edit:false, /* 默认是隐藏状态/ */
      tag:''  /* 双向绑定value */
    }
  },
  methods:{
    openEdit(){
      this.edit=true  /*  双击显示输入框，自动获取焦点 */
      this.tag=this.value /* 显示时要回显 */
    },
    close(){
      this.edit=false //失去焦点隐藏输入框
    },

    harry(){
      if(this.tag.trim()==='') return //阻止空字符串提交
      this.$emit('input',this.tag)//因为v-model触发的时input和vlaue属性。所以这里直接写input。让父组件去修改value的值
      this.edit=false  //提交完关闭输入框。
    }
  },

  //自定义命令。插入到dom节点时触发。
  directives:{
    // el就是input的标签
    focus:{
      inserted(el){
        el.focus()
      }
    }
  }
}
</script>

<style lang="less">
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>
